﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <meta name="keywords" content="jQuery, switch button, Radio Button, RadioButton, CheckInput, RadioInput, Button" />
    <meta name="description" content="This page represents the help documentation of the jqxSwitchButton and jqxRadioButton widgets." />
    <title>jqxSwitchButton and jqxRadioButton API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>

	 <div id="switchbutton">
		<div style="margin: 5px;" id="properties2">
			<h2 style="text-align: left;" class="documentation-top-header">Properties</h2>
			<table class="documentation-table">
				<tr>
					<th>Name
					</th>
					<th>Type
					</th>
					<th>Default
					</th>
				</tr>
				<tr>
					<td class="documentation-option-type-click">
						<span id='Span12'>checked</span>
					</td>
					<td>
						<span>Boolean</span>
					</td>
					<td>false
					</td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								Sets or gets the check state.
							</p>

							<h4>Code examples</h4>
							<p>
								Set the <code>checked</code> property.
							</p>
							<pre><code>$('#jqxSwitchButton').jqxSwitchButton({ checked:true }); </code></pre>
							<p>
								Get the <code>checked</code> property.
							</p>
							<pre><code>var checked = $('#jqxSwitchButton').jqxSwitchButton('checked');</code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ecrvd/">checked is set to true</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="documentation-option-type-click">
						<span id='Span7'>disabled</span>
					</td>
					<td>
						<span>Boolean</span>
					</td>
					<td>false
					</td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								Sets or gets whether the switch button is disabled.
							</p>
							<h4>Code examples</h4>
							<p>
								Set the <code>disabled</code> property.
							</p>
							<pre><code>$('#jqxSwitchButton').jqxSwitchButton({ disabled:true }); </code></pre>
							<p>
								Get the <code>disabled</code> property.
							</p>
							<pre><code>var disabled = $('#jqxSwitchButton').jqxSwitchButton('disabled');</code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/E5pw9/">disabled is set to true</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="documentation-option-type-click">
						<span id='Span6'>height</span>
					</td>
					<td>
						<span>Number/String</span>
					</td>
					<td>null
					</td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								Sets or gets the height.
							</p>
							<h4>Code examples</h4>
							<p>
								Set the <code>height</code> property .
							</p>
							<pre><code>$('#jqxSwitchButton').jqxSwitchButton({height:"400px"});</code></pre>
							<p>
								Get the <code>height</code> property.
							</p>
							<pre><code>var height = $('#jqxSwitchButton').jqxSwitchButton('height');</code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Zg4cX/">height is set to 30</a>
							</div>
						</div>
					</td>
				</tr>

				<tr>
					<td class="documentation-option-type-click">
						<span id='Span8'>orientation</span>
					</td>
					<td>
						<span>String</span>
					</td>
					<td>'horizontal'
					</td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								Determines the jqxSwitchButton's orientation.
							</p>
							<b>Possible Values:</b>
							<br />
							<pre><code>'horizontal' </code></pre>
							<pre><code>'vertical'</code></pre>
							<h4>Code examples</h4>
							<p>
								Set the <code>orientation</code> property.
							</p>
							<pre><code>$('#jqxSwitchButton').jqxSwitchButton({ orientation:vertical }); </code></pre>
							<p>
								Get the <code>orientation</code> property.
							</p>
							<pre><code>var orientation = $('#jqxSwitchButton').jqxSwitchButton('orientation');</code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bj3YP/">orientation is set to 'vertical'</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="documentation-option-type-click">
						<span id='Span9'>onLabel</span>
					</td>
					<td>
						<span>String</span>
					</td>
					<td>'On'
					</td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								Sets or gets the string displayed when the button is checked.
							</p>
							<h4>Code examples</h4>
							<p>
								Set the <code>onLabel</code> property.
							</p>
							<pre><code>$('#jqxSwitchButton').jqxSwitchButton({ onLabel:'ON' }); </code></pre>
							<p>
								Get the <code>onLabel</code> property.
							</p>
							<pre><code>var onLabel = $('#jqxSwitchButton').jqxSwitchButton('onLabel');</code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5ge3D/">onLabel is set to 'On'</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="documentation-option-type-click">
						<span id='Span10'>offLabel</span>
					</td>
					<td>
						<span>String</span>
					</td>
					<td>'Off'
					</td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								Sets or gets the string displayed when the button is unchecked.
							</p>
							<h4>Code examples</h4>
							<p>
								Set the <code>offLabel</code> property.
							</p>
							<pre><code>$('#jqxSwitchButton').jqxSwitchButton({ offLabel:'OFF' }); </code></pre>
							<p>
								Get the <code>offLabel</code> property.
							</p>
							<pre><code>var offLabel = $('#jqxSwitchButton').jqxSwitchButton('offLabel');</code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/R3D5t/">offLabel is set to 'Off'</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="documentation-option-type-click">
						<span id='Span11'>thumbSize</span>
					</td>
					<td>
						<span>String</span>
					</td>
					<td>'40%'
					</td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								Sets or gets the size of the thumb in percentages.
							</p>
							<h4>Code examples</h4>
							<p>
								Set the <code>thumbSize</code> property.
							</p>
							<pre><code>$('#jqxSwitchButton').jqxSwitchButton({ thumbSize:'50%' }); </code></pre>
							<p>
								Get the <code>thumbSize</code> property.
							</p>
							<pre><code>var thumbSize = $('#jqxSwitchButton').jqxSwitchButton('thumbSize');</code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2rFLw/">thumbSize is set to '30%'</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="documentation-option-type-click">
						<span id='Span21'>width</span>
					</td>
					<td>
						<span>Number/String</span>
					</td>
					<td>null
					</td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								Sets or gets the width.
							</p>
							<h4>Code examples</h4>
							<p>
								Set the <code>width</code> property.
							</p>
							<pre><code>$('#jqxSwitchButton').jqxSwitchButton({width:"200px"});</code></pre>
							<p>
								Get the <code>width</code> property.
							</p>
							<pre><code>var width = $('#jqxSwitchButton').jqxSwitchButton('width');</code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jfJwq/">width is set to 80</a>
							</div>
						</div>
					</td>
				</tr>

				<tr>
					<td colspan='3' style='width: 100%'>
						<h2 class="documentation-top-header">Events</h2>
					</td>
				</tr>
				<tr>
					<td class="documentation-option-type-click">
						<span id='Span13'>checked</span>
					</td>
					<td>
						<span>Event</span>
					</td>
					<td></td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								This event is triggered when the switch button is checked.
							</p>
							<h4>Code examples</h4>
							<p>
								Bind to the <code>checked</code> event by type: jqxSwitchButton.
							</p>
							<pre><code>$('#jqxSwitchButton').on('checked', function (event) { // Some code here.}); </code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2bU8L/">Bind to the checked event by type: jqxSwitchButton</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="documentation-option-type-click">
						<span id='Span15'>change</span>
					</td>
					<td>
						<span>Event</span>
					</td>
					<td></td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								This event is triggered when the switch button's state changes from one state to another.
							</p>
							<h4>Code examples</h4>
							<p>
								Bind to the <code>change</code> event by type: jqxSwitchButton.
							</p>
							<pre><code>$('#jqxSwitchButton').on('change', function (event) { // Some code here.}); </code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6VbfW/">Bind to the change event by type: jqxSwitchButton</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="documentation-option-type-click">
						<span id='Span14'>unchecked</span>
					</td>
					<td>
						<span>Event</span>
					</td>
					<td></td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								This event is triggered when the switch button is unchecked.
							</p>
							<h4>Code examples</h4>
							<p>
								Bind to the <code>unchecked</code> event by type: jqxSwitchButton.
							</p>
							<pre><code>$('#jqxSwitchButton').on('unchecked', function (event) { // Some code here.}); </code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Pv4Kf/">Bind to the unchecked event by type: jqxSwitchButton</a>
							</div>
						</div>
					</td>
				</tr>

				<tr>
					<td colspan='3' style='width: 100%'>
						<h2 class="documentation-top-header">Methods</h2>
					</td>
				</tr>
				<tr>
					<td class="documentation-option-type-click">
						<span id='Span16'>check</span>
					</td>
					<td>
						<span>Method</span>
					</td>
					<td></td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								Checks the button.
							</p>
							<div class="methodArgs">
								<table class="arguments">
									<tbody>
										<tr>
											<th>Parameter</th>
											<th>Type</th>
											<th>Description</th>
										</tr>
										<tr>
											<td><em>None</em></td>
											<td></td>
											<td></td>
										</tr>
									</tbody>
								</table>
								<strong>Return Value</strong><br />
								<em>None</em>
							</div>
							<h4>Code example</h4>
							<p>
								Invoke the <code>check</code> method.
							</p>
							<pre><code>$('#jqxSwitchButton').jqxSwitchButton('check');</code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/k9d5B/">checks the jqxSwitchButton</a>
							</div>
						</div>
					</td>
				</tr>

				<tr>
					<td class="documentation-option-type-click">
						<span id='Span19'>disable</span>
					</td>
					<td>
						<span>Method</span>
					</td>
					<td></td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								Disables the switch button.
							</p>
							<div class="methodArgs">
								<table class="arguments">
									<tbody>
										<tr>
											<th>Parameter</th>
											<th>Type</th>
											<th>Description</th>
										</tr>
										<tr>
											<td><em>None</em></td>
											<td></td>
											<td></td>
										</tr>
									</tbody>
								</table>
								<strong>Return Value</strong><br />
								<em>None</em>
							</div>
							<h4>Code example</h4>
							<p>
								Invoke the <code>disable</code> method.
							</p>
							<pre><code>$('#jqxSwitchButton').jqxSwitchButton('disable');</code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fRKg8/">disable the jqxSwitchButton</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="documentation-option-type-click">
						<span id='Span20'>enable</span>
					</td>
					<td>
						<span>Method</span>
					</td>
					<td></td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								Enables the switch button.
							</p>
							<div class="methodArgs">
								<table class="arguments">
									<tbody>
										<tr>
											<th>Parameter</th>
											<th>Type</th>
											<th>Description</th>
										</tr>
										<tr>
											<td><em>None</em></td>
											<td></td>
											<td></td>
										</tr>
									</tbody>
								</table>
								<strong>Return Value</strong><br />
								<em>None</em>
							</div>
							<h4>Code example</h4>
							<p>
								Invoke the <code>enable</code> method.
							</p>
							<pre><code>$('#jqxSwitchButton').jqxSwitchButton('enable');</code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/DnYEn/">enables the jqxSwitchButton</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="documentation-option-type-click">
						<span id='Span18'>toggle</span>
					</td>
					<td>
						<span>Method</span>
					</td>
					<td></td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								Toggles the check state. This method is automatically called when the user clicks
																					the switch button.
							</p>
							<div class="methodArgs">
								<table class="arguments">
									<tbody>
										<tr>
											<th>Parameter</th>
											<th>Type</th>
											<th>Description</th>
										</tr>
										<tr>
											<td><em>None</em></td>
											<td></td>
											<td></td>
										</tr>
									</tbody>
								</table>
								<strong>Return Value</strong><br />
								<em>None</em>
							</div>
							<h4>Code example</h4>
							<p>
								Invoke the <code>toggle</code> method.
							</p>
							<pre><code>$('#jqxSwitchButton').jqxSwitchButton('toggle');</code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Cnp9K/">toggles the jqxSwitchButton</a>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="documentation-option-type-click">
						<span id='Span17'>uncheck</span>
					</td>
					<td>
						<span>Method</span>
					</td>
					<td></td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								Unchecks the button.
							</p>
							<div class="methodArgs">
								<table class="arguments">
									<tbody>
										<tr>
											<th>Parameter</th>
											<th>Type</th>
											<th>Description</th>
										</tr>
										<tr>
											<td><em>None</em></td>
											<td></td>
											<td></td>
										</tr>
									</tbody>
								</table>
								<strong>Return Value</strong><br />
								<em>None</em>
							</div>
							<h4>Code example</h4>
							<p>
								Invoke the <code>uncheck</code> method.
							</p>
							<pre><code>$('#jqxSwitchButton').jqxSwitchButton('uncheck');</code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/guWgQ/">unchecks the jqxSwitchButton</a>
							</div>
						</div>
					</td>
				</tr>

				<tr>
					<td class="documentation-option-type-click">
						<span id='Span59'>val</span>
					</td>
					<td>
						<span>Method</span>
					</td>
					<td></td>
				</tr>
				<tr>
					<td colspan='3' style='width: 100%'>
						<div class="documentation-option-description property-content" style="display: none;">
							<p>
								Sets or gets the value.
							</p>
							<div class="methodArgs">
								<table class="arguments">
									<tbody>
										<tr>
											<th>Parameter</th>
											<th>Type</th>
											<th>Description</th>
										</tr>
										<tr>
											<td><em>value(optional)</em></td>
											<td>Boolean</td>
											<td></td>
										</tr>
									</tbody>
								</table>
								<strong>Return Value</strong><br />
								<em>Boolean</em>
							</div>
							<h4>Code example</h4>
							<p>
								Invoke the <code>val</code> method.
							</p>
							// Get the value.
																				<pre><code>var value = $("#jqxSwitchButton").jqxSwitchButton('val');</code></pre>
							// Get the value using jQuery's val()
																				<pre><code>var value = $("#jqxSwitchButton").val();</code></pre>
							// Set value.
																				<pre><code>$("#jqxSwitchButton").jqxSwitchButton('val', true);</code></pre>
							// Set value using jQuery's val().
																				<pre><code>$("#jqxSwitchButton").val(true);</code></pre>
							<div style="padding-bottom: 5px;">
								<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LM3aX/">sets the value of the jqxSwitchButton</a>
							</div>
						</div>
					</td>
				</tr>
			</table>
			<br />
		</div>

	</div>
</body>
</html>
